app.views.ListDetailView = Ext.extend(Ext.Panel, {
	dockedItems: [{
		title: 'Check Lists',
		xtype: 'toolbar',
		items: [
			

			{
				text : 'back',
				ui: 'back',
				listeners: {
					'tap': function() {
						Ext.dispatch({
							controller: app.controllers.ListController,
							action: 'cancelCreate',
							animation: {type: 'slide', direction: 'right'}
						});
					}
				}
			}
		]
		
	},
	
	{
		dock : 'bottom',
		xtype: 'toolbar',
		ui   : 'light',
		items: [
			
			{
				iconCls: 'add1',
				iconMask: true,
				ui: 'plain',
				text: 'add',
				
				listeners: {
					'tap': function() {
						Ext.dispatch({
							controller: app.controllers.ListController,
							action: 'createNewItem',
							id: app.views.ListDetailView.record.get('id'),
							animation: {type: 'slide', direction: 'left'}
						});
					}
				}
				
			},
			{
				iconCls: 'compose',
				iconMask: true,
				ui: 'plain',
				text: 'edit',
				listeners: {
					'tap': function() {
						
						var liId = app.views.ListDetailView.record.get('id');
						var itemId = app.views.ListDetailView.selectItem;
																		
						if (liId && itemId > 0) {
														
							console.log('before update item list ' + liId + ' item ' + itemId);
							
							Ext.dispatch({
								controller: app.controllers.ListController,
								liId: liId,
								itemId: itemId,
								action: 'updateItem',
								animation: {type: 'slide', direction: 'left'}
							});						
						}
						else {
							alert('Please choose the item you want to edit.');
						}
					}
				}
			},
			
			{
				iconCls: 'empty1',
				iconMask: true,
				ui: 'plain',
				text: 'clear',
				listeners: {
					'tap': function() {
						/*
						Ext.dispatch({
							controller: app.controllers.ListController,
							action: 'createNewList',
							animation: {type: 'slide', direction: 'left'}
						});
						*/
					}
				}
			},
			
			{
				iconCls: 'mail5',
				iconMask: true,
				ui: 'plain',
				text: 'email',
				listeners: {
					'tap': function() {
						/*
						var liId = app.views.ListDetailView.record.get('id');
						var itemId = app.views.ListDetailView.selectItem;
																		
						if (liId && itemId > 0) {
														
							console.log('before update item list ' + liId + ' item ' + itemId);
							
							Ext.dispatch({
								controller: app.controllers.ListController,
								liId: liId,
								itemId: itemId,
								action: 'updateItem',
								animation: {type: 'slide', direction: 'left'}
							});						
						}
						else {
							alert('Please choose the item you want to edit.');
						}
						*/
					}
				}
			}
		]
	}],
	
	items: [{
		xtype: 'list',
		store: app.stores.checkLists,
		singleSelect: true,
		itemTpl: new Ext.XTemplate(
					'<div class="itemblock">',
						'<div class="checkblock">',
							'<tpl if="status==\'new\'">',
								'<input type="checkbox" name="{listId}_{itemOrder}" value="{status}" />',
							'</tpl>',
							'<tpl if="status!=\'new\'">',
								'<input type="checkbox" name="{listId}_{itemOrder}" value="{status}" checked="checked"/>',
							'</tpl>',
						'</div>',
						'<div class="itemtext">',
							'<pre>',
								'{item}',
							'</pre>',
						'</div>',
					'</div>'
				),
		collectData : function(records, startIndex) {
		
			// console.log('collectData method called in ListDetailView ');
			var selItemId = this.current.get('id');
			
			var r = [],
            i = 0,
            len = records.length;

			for(; i < len; i++){
				if (records[i].get('id') == selItemId) {
					var dispItems = records[i].get('items');
					
					dispItems.sort(sortListItems);
					if (dispItems) {
						nlen = dispItems.length;
						j = 0;
						for(; j < nlen; j++){
							r[r.length] = this.prepareData(dispItems[j].data, j, dispItems[j]);
						}
					}
				}
				
			}

			return r;

		},
		
		emptyText: 'No item under this list. Tap add button on the bottom to add a item',
		
		listeners: {
			tap: {
				element: 'el',
				fn: function(event) {
										
					var target = event.target;

					if (target.type == 'checkbox') {
						var ido = target.name;
						var liId = ido.substring(0, ido.lastIndexOf('_'));
						var itemOrder = ido.substring(ido.lastIndexOf('_') + 1);
						
						var theItem = {};
						
						var theList = app.views.ListDetailView.getRecord();
						
						var items = theList.get('items');
						
						for (k = 0; k < items.length; k++) {
							if (items[k].get('itemOrder') == itemOrder) {
								theItem = items[k];
								var checked = items[k].get('status');
								
								// console.log('listId/itemOrder/status: ' + liId + ' / ' + itemOrder + ' / ' + checked);
								
								if (checked == 'new') {
									checked = 'checked';
								}
								else {
									checked = 'new';
								}
								
								theItem.set('status', checked);
						
								var parameters = {
									liId: liId,
									itemOrder: itemOrder,
									status: checked
								};
								
								var rcds = [];
								rcds.push(parameters);
								
								var operation = new Ext.data.Operation({
									action: 'updateList',
									records: rcds
								});
								
								var theProxy = app.stores.checkLists.getProxy();
								
								theProxy.update(operation, null, null);
								
																
								break;
							}
						}
											
					}
					else {
						
												
						var listItemEl = jQuery('div.x-list-item');
						var targetEl = jQuery(target).parents('div.x-list-item');
												
						listItemEl.removeClass('x-item-selected');
						targetEl.addClass('x-item-selected');
												
						var itemName = targetEl.find('input[type=checkbox]').first().attr('name');
																	
						var itemIndex = itemName.substring(itemName.lastIndexOf('_') + 1); 
						
						console.log('clicked item: ' + itemIndex);		
						
						app.views.ListDetailView.selectItem = itemIndex;
					}
	
						
					
				}
			}
			

		}
		
	}],
				
	updateWithRecord: function(record) {
	
		var toolbar = this.getDockedItems()[0];
		toolbar.setTitle(record.get('listName'));
		// toolbar.getComponent('additem').record = record;
		
		this.items.items[0].current = record;
		
		this.record = record;
	},
	
	getRecord: function() {
		return this.record;
	}
	
});

function sortListItems(item1, item2) {
	if (item1.get('status') == item2.get('status')) {
		return item1.get('itemOrder') - item2.get('itemOrder');
	}
	else {
		if (item1.get('status') == 'new') {
			return -1;
		}
		else {
			return 1;
		} 
	}
}